<template>
  <div class="Institutionalregistration">
    <div class="container">
      <!-- 头部信息 -->
      <header>
        <Row>
          <Col :xs="24">
          <div class="margin-up-down">
              <Button type="primary" @click="add" class="addButton">
                <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>              
              </Button>
            </div>
          <div class="margin-up-down">
            <newfourLevelLinkage
              @changeProvince="changeProvince"
              @changeCity="changeCity"
              @changeArea="changeArea"
              :province="province"
              :city="city"
              :area="area"
            ></newfourLevelLinkage>
          </div>
          <div class="margin-up-down">
            <Input v-model.trim="Name" clearable placeholder='药店名称' style="width: 260px" />
          </div>
          <div class="margin-up-down">
              <Button
                type="primary"
                icon="ios-search"
                @click="getMechanismreg(1)"
                style="width: 51px;height:32px"
              ></Button>
              <Button @click="reset" style="width: 51px;height:32px">
                <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
              </Button>
          </div>
        </Col>
        </Row>        
      </header>
      <!-- 列表 -->
      <div class="list">
        <Table
          border
          :columns="column"
          :data="list"
          stripe
          no-filtered-data-text="未查询到符合条件的记录"
          @on-selection-change="selectChange"
        ></Table>
      </div>
      <!--分页器-->
      <div class="page">
          <Page :total="doctorregisterSize" :current='pageNo' show-total show-elevator @on-change="pageChange"/>
      </div>
    </div>
    <!-- 删除确认弹窗 -->
    <Modal v-model="showDelModal" title="确认删除弹窗" class="drugmanagement-commondrug-list-delModal">
      <p>删除后不可恢复，确认删除所选项吗？</p>
      <div slot="footer">
        <Button class="cancel-btn btn" @click="showDelModal = false">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
        </Button>
        <Button class="save-btn btn" type="primary" icon="ios-checkmark" :loading="delLoading" @click="handleDel">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
// 医疗机构注册
import api from "@/api/commonApi";
import { Page } from "view-design";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
export default {
  components: {
    Page,
    newfourLevelLinkage
  },
  data() {
    return {
      curRecord: [],
      showDelModal: false,
      delLoading: false,
      pageSize: 10,
      pageList: [
        {
          value: 5,
          label: 5
        },
        {
          value: 10,
          label: 10
        },
        {
          value: 20,
          label: 20
        },
        {
          value: 50,
          label: 50
        }
      ],
      province: null,
      city: null,
      area: null,
      pharmacy: null,
      isBack: 1,
      doctorregisterSize: 10,
      list: [],
      Name: "",
      pageNo: 1,
      column: [
        {
          title: "排序",
          key: "sum",
          align: "center",
          width: 70,
          render: (h, params) => {
            let sum = (this.pageNo-1)*this.pageSize + params.index +1;
            return h("span", sum);
          }
        },
        {
          title: "药店名称",
          key: "orgName",
          align: "center",
        },
        {
          title: "药店地址",
          key: "hosAddr",
          align: "center",
        },
        {
          title: "联系人",
          key: "linkman",
          align: "center",
        },
        {
          title: "联系电话",
          key: "linkmanTelephone",
          align: "center",
        },
        {
          title: "设置",
          align: "center",
          width: 180,
          render: (h, params) => {
            let ipres = params.row.ipres;
            let row = params.row;
            if (ipres == null) {
              return h("div", [
                h(
                  "span",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                        color: '#5362e1',
                        margin: "0px 6px"
                    },
                    on: {
                      click: () => {
                        this.edit(row);
                      }
                    }
                  },
                  "编辑"
                ),
				'|',
                h(
                  "span",
                  {
                    props: {
                      size: "small"
                    },
                    style: {
						color: '#21c780',
						margin: "0px 6px"
					},
                    on: {
                      click: () => {
                        this.details(row);
                      }
                    }
                  },
                  "详情"
                ),
				'|',
                h(
                  "span",
                  {
                    props: {
                      size: "small",
                      type:"error"
                    },
                    style: {
						color: '#fc6c49',
						marginLeft: "6px"
					},
                    on: {
                      click: () => {
                        this.delete(row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
            if (ipres == 1) {
              return h("div", [
                h(
                  "span",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
						color: '#5362e1',
						margin: "0px 6px"
					},
                    on: {
                      click: () => {
                        this.edit(row);
                      }
                    }
                  },
                  "编辑"
                ),
				'|',
                h(
                  "span",
                  {
                    props: {
                      size: "small"
                    },
                    style: {
						color: '#21c780',
						margin: "0px 6px"
					},
                    on: {
                      click: () => {
                        this.details(row);
                      }
                    }
                  },
                  "详情"
                ),
              ]);
            }
            if (ipres == 0) {
              return h("div", [
                h(
                  "span",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
						color: '#5362e1',
						margin: "0px 6px"
					},
                    on: {
                      click: () => {
                        this.edit(row);
                      }
                    }
                  },
                  "编辑"
                ),
				'|',
                h(
                  "span",
                  {
                    props: {
                      size: "small"
                    },
                    style: {
						color: '#21c780',
						margin: "0px 6px"
					},
                    on: {
                      click: () => {
                        this.details(row);
                      }
                    }
                  },
                  "详情"
                ),
              ]);
            }
          }
        }
      ]
    };
  },
  watch: {
    pageSize(nv, ov) {
      this.getMechanismreg();
    }
  },
  created() {
    this.province = this.$route.query.province
      ? parseInt(this.$route.query.province)
      : null;
    this.city = this.$route.query.city
      ? parseInt(this.$route.query.city)
      : null;
    this.area = this.$route.query.area
      ? parseInt(this.$route.query.area)
      : null;

    this.isBack = this.$route.query.isBack
      ? parseInt(this.$route.query.isBack)
      : 1;
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/organizat/drugstore/list",
        title: "索引管理"
      },
      {
        path: "/index/organizat/drugstore/list",
        title: "药店机构注册"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let pageNo = this.$route.query.pageNo;
    if (pageNo) {
      this.pageNo = parseInt(pageNo);
    }
    this.getMechanismreg(this.pageNo);
  },
  methods: {
    // 关闭处方流转
    close(item) {
      let id = item.id;
      this.$axios
        .post(api.mechanismregClose, {
          id
        })
        .then(res => {
          if (res.data.code) {
            this.$Message.info("修改成功");
            this.getMechanismreg();
          }
        });
    },
    // 开启处方流转
    open(item) {
      let id = item.id;
      this.$axios
        .post(api.mechanismregOpen, {
          id
        })
        .then(res => {
          if (res.data.code) {
            this.$Message.info("修改成功");
            this.getMechanismreg();
          }
        });
    },

    selectChange(curRecord) {
      let arr = curRecord.map(id => id["id"]);
      this.curRecord = arr;
    },
    reset() {
      this.Name = "";
      this.province = null;
      this.city = null;
      this.area = null;
      this.pageNo = 1;
      this.getMechanismreg(this.pageNo);
    },
    select(name) {
      if (name == "全部") {
        this.MenuText = "全部";
      } else if (name == "未开通") {
        this.MenuText = "未开通";
      } else if (name == "已开通") {
        this.MenuText = "已开通";
      } else if (name == "已关闭") {
        this.MenuText = "已关闭";
      }
    },
    changeProvince(val) {
      this.province = val;
    },
    changeCity(val) {
      this.city = val;
    },
    changeArea(val) {
      this.area = val;
    },
    //停用/启用
    enable(item) {
      let id = item.id;
      let enable = 0;
      if (!item.enable) {
        enable = 1;
      }
      this.$axios
        .post(api.mechanismregEnable, {
          enable,
          id
        })
        .then(res => {
          if (res.data.code) {
            let ret = res.data.object;
            item.enable = enable;
            this.$Message.info("修改成功");
          }
        });
    },
    pageChange(index) {
      this.getMechanismreg(index);
    },
    // 药店详情
    details(item) {
      let id = item.id;
      this.functionJS.queryNavgationTo(
        this,
        "/index/organizat/drugstore/details",
        {
          id,
          pageNo: this.pageNo,
          province: this.province,
          city: this.city,
          area: this.area,
          pharmacy: this.pharmacy,
          isBack: 2
        }
      );
    },
    // 新增机构
    add(item) {
      let id = item.id;
      this.functionJS.queryNavgationTo(this, "/index/organizat/drugstore/add", {
        id,
        pageNo: this.pageNo,
        province: this.province,
        city: this.city,
        area: this.area,
        pharmacy: this.pharmacy,
        isBack: 2
      });
    },
    // 删除机构
    delete(item) {
      let id = item.id;
      this.curRecord = [id];
      this.showDelModal = true;
    },
    // 手动删除
    handleDel() {
      this.delLoading = true;
      this.$axios
        .post(api.deleteController, this.curRecord)
        .then(res => {
          this.delLoading = false;
          if (!res.data.code) {
            this.$Message.error(res.data.object.join('\n'));
            return false;
          }
          this.$Message.success("删除成功");
          this.showDelModal = false;
          this.getMechanismreg(1);
          this.curRecord = [];
        })
        .catch(res => {
          this.delLoading = false;
        });
    },
    // 编辑机构
    edit(item) {
      let id = item.id;
      this.functionJS.queryNavgationTo(this, "/index/organizat/drugstore/edit", {
        id,
        pageNo: this.pageNo,
        province: this.province,
        city: this.city,
        area: this.area,
        isBack: 2
      });
    },
    getMechanismreg(pageNo) {
      this.pageNo = pageNo;
      let params = {
        pageNo,
        pageSize: this.pageSize
      };
      if (this.Name != "") {
        params.orgName = this.Name.trim();
      }
      params.provinceCode = this.province ? this.province : null;
      params.cityCode = this.city ? this.city : null;
      params.districtCode = this.area ? this.area : null;
      params.hospitalType = 2;
      this.$axios.post(api.mechanismregList, params).then(res => {
        if (res.data.code) {
          let ret = res.data.object;
          this.doctorregisterSize = ret.total;
          if(ret.records){
            ret.records.forEach((item, index) => {
              item.sum = this.addZeros(index);
            });
            this.list = ret.records;
          } else {
            this.list = []
          }         
          // sessionStorage.setItem("list", JSON.stringify(this.list));
        } else {
          this.$Message.error(res.data.message);
        }
      });
    }
  },
};
</script>
<style lang="less" scoped>
.Institutionalregistration {
  margin: 0 auto;
  padding: 10px;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  .container {
    width: 100%;
    margin: 0 auto;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
        margin-right: 10px;
    }
    .addButton{
      border: 1px solid #21c780;
      background-color: #21c780;
    }
    .page{
      text-align: center;
    }
    .filter-part {
      display: flex;
      flex-wrap: wrap;
      .filter-item {
          display: flex;
          margin: 10px 10px 10px 0;
          label {
              white-space: nowrap;
              line-height: 32px;
              width: 120px;
              text-align: right;
          }
          .input {
              width: 220px;
          }
          .select {
              width: 70px;
          }
      }
      .filter-btn-group {
          margin: 10px 10px 10px 0;
          flex: 0 0 auto;
      }
    }
    header {
      width: 100%;
      position: relative;
      .btn {
        margin-top: 10px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .list {
      width: 100%;
      margin: 10px 0;
    }
  }
}
.drugmanagement-commondrug-list-MedicalModal {
  /deep/ .ivu-modal-wrap {
    label.ivu-form-item-label {
      padding-right: 0;
    }
    .ivu-modal-footer {
      display: none;
    }
    .btn-group {
      text-align: center;
      .save {
        width: 100px;
        margin-right: 20px;
      }
      .close {
        margin-left: 20px;
        width: 100px;
      }
    }
  }
}
.drugmanagement-commondrug-list-delModal {
  /deep/ .ivu-modal-wrap {
    .btn {
      width: 80px;
    }
  }
}
</style>